<template>
    <div class="big">
        <div class="fl">
            选择分类
        </div>
        <div  v-for="(v,i) in arr" :key="i">

       <div class="top">{{v.top}}</div>

        <div class="smaill">
            <span v-for="(v,i) in v.text" :key="i">
                    {{v.a}}
            </span>
        </div>
        </div>
    </div>
</template>

<script>
import getLink from "@/api/getindex.js"
export default {
data(){
    return{
        arr:[]
    }
},
    created(){
    getLink("/mock/data/classification").then(res => {
    this.arr =res.data;
    })
}
}
</script>

<style scoped>
    .fl{
        background-color: #FFC300;
        text-align: center;
        padding: 4% 0;
    }
    .big{
        margin-bottom: 20%;
        background-color: #F0EFED;
    }
    .top{
        margin: 4%;
    }
    .smaill{
        margin: 4%;
        background-color: #FDFDFC;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }
    .smaill span{
        text-align: center;
        width: 25%;
        margin: 3%;
    }

</style>
